﻿<!doctype html>
<html>
<head><meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="/static/css/bootstrap.css" rel="stylesheet">
<title>图片</title>
<style type="text/css">
        .container .column{
            float: left;
            width: 24%;
        }
    </style>
    <script src="/static/js/jquery.min.js">
</script>
</head>
<body>
<a>当前为第<span id="nowpage">1</span>页</a>
    <div class="pagination pagination-centered">
        <ul>
    	<li><a class="pre" href="#">«</a></li>
    	<li><a class="btn" href="#">1</a></li>
    	<li><a class="btn" href="#">2</a></li>
        <li><a class="btn" href="#">3</a></li>
    	<li><a class="btn"  href="#">4</a></li>
    	<li><a class="btn"  href="#">5</a></li>
    	<li><a class="net"  href="#">»</a></li>
        </ul>
    </div>
<p id="list_result"></p>
</body>
<script>
    var list
$.showlist=function(nowpage){
    var url = ['<div class="column">', '<div class="column">', '<div class="column">', '<div class="column">'];
    var num = 0;
    var j
    var index=nowpage*12
    var temp = '<div class="container">';
    for (var i =index; i <index+12; i++) {
        j = num % 4;
        num = num + 1;
        url[j] = url[j] + '<div class="item"><img src=';
        url[j] += list[i];
        url[j] = url[j] + ' ></div>';
    }
    for (var k = 0; k <= 3; k++) {
        url[k] = url[k] + '</div>';
    }
    for (var t= 0; t<= 3; t++) {
        temp=temp+url[t];
    }
    temp=temp+'</div>';
    $('#list_result').html(temp);
}
$(document).ready(function(){
    $.getJSON("/json/{{item}}/",function (data){
		    list=data.imgurl;
            $.showlist(0);
        })
        $('.btn').click(function(){
            var pagenum=$(this).text();
            $.showlist(pagenum);
            $('#nowpage').html(pagenum);
        })
        $('.pre').click(function(){
            var pagenum=parseInt($('#nowpage').text())-1;
            $.showlist(pagenum);
            $('#nowpage').html(pagenum);
        })
        $('.net').click(function(){
            var pagenum=parseInt($('#nowpage').text())+1;
            $.showlist(pagenum);
            $('#nowpage').html(pagenum);
    })
	});


</script>
<script src="/static/js/jquery.minijs"></script>
<script src="/static/js/bootstrap.js"></script>
</html>